<template>
  <el-dialog  class="comp-viewer-dailog" :title="title" :visible.sync="visible" append-to-body>
    <div class="dailog-viewer" v-loading="loading">
      <template v-if="data.length">
        <video-player
          v-if="mediaType === 'mp4' || mediaType === 'mov'"
          :src="data[0]"
          :options="defOpts"
        ></video-player>
        <image-viewer
          v-else
          :data="data"
          :options="defOpts"
        >
        </image-viewer>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import ImageViewer from '@/components/ImageViewer'
import VideoPlayer from '@/components/VideoPlayer'
export default {
  name: 'ViewerDailog',
  components: {
    ImageViewer,
    VideoPlayer
  },
  props: {
    options: {
      type: Object
    },
    title: {
      type: String,
      default: '查看图片'
    },
    data: {
      type: Array,
      required: true
    },
    loading: Boolean,
    viewerShow: Boolean,
    appendToBody: Boolean
  },
  data () {
    return {
      type: ''
    }
  },
  created () {
  },
  computed: {
    mediaType () {
      return this.data[0].split('/').pop().split('.')[1]
    },
    visible: {
      get () {
        return this.viewerShow
      },
      set (val) {
        this.$emit('update:viewerShow', val)
      }
    },
    defOpts () {
      return Object.assign({}, this.options)
    }
  },
  methods: {
    // utils
    // bussiness
    // events
  }
}
</script>
<style lang="scss" scoped >
.comp-viewer-dailog {
  .viewer-image-temp {
    display: none;
  }
  .dailog-viewer {
    position: relative;
    height: 100%;
    background-color: #efefef;
  }
  .viewer-container {
    height: 100%;
  }
  /deep/ .el-dialog {
    width: 80%;
    .el-dialog__body {
      height: 70vh;
    }
  }

}
</style>
